<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      #canvas {
          background: #f1f1f1;
      }
  </style>
</head>
<body>
<canvas id="canvas" width="2000" height="1000"></canvas>
<script>
    window.onload = () => {
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
        ctx.font = '16px sans-serif'
        ctx.textAlign = 'center'
        const img = new Image()
        img.crossOrigin = 'anonymous'
        img.src = 'https://mdn.github.io/dom-examples/canvas/pixel-manipulation/assets/rhino.jpg'
        // 本示例比较了三个图像。 第一个图像以其自然大小绘制，第二个图像缩放为3倍并启用了图像平滑，而第三个图像缩放为3倍但禁用了图像平滑。
        img.onload = ()=>{
            const w = img.width
            const h = img.height
            ctx.fillText('Source',w*0.5,20)
            ctx.drawImage(img,0,24,w,h)

            ctx.fillText('Smooth true',w*2.5,20)
            ctx.imageSmoothingEnabled = true
            ctx.drawImage(img,w,24,w*3,h*3)

            ctx.fillText('Smooth false',w*5.5,20)
            ctx.imageSmoothingEnabled = false
            ctx.drawImage(img,w*4,24,w*3,h*3)
        }

    }

</script>
</body>
</html>
